<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .my-select{
      display: flex;
    }
  </style>
</head>
<body>

<div id="app">
  使用组件的实例，就跟写标签差不多
  <my-select></my-select>
  <hr>
  <my-select></my-select>
  <hr>
</div>

<div id="app2">
  使用组件的实例，就跟写标签差不多
  <my-select></my-select>
  <hr>
  <my-select></my-select>
  <hr>
</div>

<template id="my-select-template">
  <div class="my-select">
    <div>一级分类：<select> <option value="">请选择</option> </select></div>
    <div>二级分类：<select> <option value="">请选择</option> </select></div>
    <div>三级分类：<select> <option value="">请选择</option> </select></div>
  </div>
</template>

<script src="js/vue.js"></script>
<script>
  // 定义全局组件
  Vue.component("my-select",{
    // 组件中的数据部门必须是函数的方式返回
    data:function () {
      return {
        message: "我是组件中的data"
      }
    },
    // 组件的模板，除了直接写内容结构之外，也可以写一个选择器
    template:"#my-select-template"
  });

  var vm = new Vue( {
    el: "#app",
    data:{
      message: "hello!"
    },
    methods:{}
  } );

  var vm = new Vue( {
    el: "#app2",
    data:{
      message: "hello!"
    },
    methods:{}
  } );
</script>

</body>
</html>
